<template>
  <div class="user-edit-container">
    <!-- Header 区域 -->
    <van-nav-bar title="编辑资料" left-arrow @click-left="$router.back()" fixed />

    <!-- 用户资料 -->
    <van-cell-group class="action-card">
      <van-cell title="头像" is-link center>
        <template #default>
            <!-- @click="imgClickFn" 图片点击事件 -->
          <van-image round class="avatar" :src="profileObj.photo" @click="imgClickFn"/>
           <!-- file 选择框（隐藏） 上传图片  ref="iptFile" 别名-->
           <!--  @change="onFileChange" 上传换图事件 -->
        <input
               type="file"
               ref="iptFile"
               v-show="false"
               accept="image/*"
               @change="onFileChange"
               />
        </template>
      </van-cell>
      <van-cell title="名称" is-link  :value="profileObj.name"/>
      <van-cell title="生日" is-link  :value="profileObj.birthday"/>
      <van-cell title="性别" is-link  :value="sexObj[profileObj.gender]"/>
    </van-cell-group>
  </div>
</template>

<script>
import { userProfileAPI, updatePhotoAPI } from '@/api'
export default {
  data () {
    return {
      profileObj: {}, // 保存用户信息 对象
      sexObj: {
        1: '女',
        0: '男',
        '-1': '保密' // 数据映射
      }
    }
  },
  name: 'UserEdit',
  async created () {
    const res = await userProfileAPI()
    console.log(res)
    this.profileObj = res.data.data
  },
  methods: {
    // 图片点击事件
    imgClickFn () {
      this.$refs.iptFile.click() // input 上传文件-事件
    },
    // 选择文件--同时--图片文件发给后台更新头像
    async onFileChange (ev) {
      console.log(ev.target.files[0]) // 文件对象
      const formData = new FormData() // 自己创建 FormData对象
      formData.append('photo', ev.target.files[0]) // 加入参数名和值
      const res = await updatePhotoAPI(formData) // 传 formData对象
      console.log(res)
    //   this.profileObj.photo = res.data.data.photo // 上传成功，更新 前端数据 头像地址
    }
  }
}
</script>

<style lang="less" scoped>
.user-edit-container {
  padding-top: 46px;
  .avatar {
    width: 50px;
    height: 50px;
  }
}
</style>
